<template>
  <div class="PayAuth row-center">
    <div class="main-box">
      <div class="label">银行卡信息</div>
      <div class="tip">为了保障您的交易安全，请填写您的银行卡信息，“广西制造业企业培优育强服务券平台”会对您的银行卡进行验证。<br>以下银行账号仅作为贵单位在“广西制造业企业培优育强服务券平台”在线支付收款、退款指定账户。</div>
      <el-form :model="payForm" :rules="payRules" ref="payFormRef" label-width="110px" size="medium" class="form">
        <el-form-item label="银行开户名" prop="bankAccountName">
          <el-input v-model="payForm.bankAccountName" :disabled="isPayAuth && notEdit" placeholder="请输入银行开户名" />
        </el-form-item>
        <el-form-item label="开户银行" prop="bankName">
           <el-input v-model="payForm.bankName" :disabled="isPayAuth && notEdit" placeholder="请输入开户银行名称" />
        </el-form-item>
        <el-form-item label="开户所在地" prop="bankLocation">
          <el-select v-model="payForm.bankLocation" filterable clearable allow-create remote :remote-method="loadBankLocationOptions" :loading="isLoading" :disabled="isPayAuth && notEdit" placeholder="请输入关键字搜索" style="width:100%">
            <el-option v-for="item in bankLocationOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="开户支行名称" prop="bankInfo">
          <el-select v-model="payForm.bankInfo" filterable clearable allow-create remote :remote-method="loadBankOptions" :loading="isLoading" :disabled="isPayAuth && notEdit" placeholder="请输入关键字搜索" style="width:100%">
            <el-option v-for="item in bankOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="银行账号" prop="bankAccount">
          <el-input :disabled="isPayAuth && notEdit" v-model="payForm.bankAccount" placeholder="请输入银行账号" />
        </el-form-item>
         <el-form-item label=""> 
          <div class="row-spaceb">
            <el-button type="primary" class="saveBtn" @click="edit" :loading="saveLoading" :disabled="!isPayAuth" >编辑</el-button>
            <el-button type="primary" class="saveBtn" @click="save" :loading="saveLoading" :disabled="isPayAuth && notEdit" >保存</el-button>
          </div>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { companyAuthPay,getBankBranch,getBankLocation,getCompanyPayInfo } from '@/api/homeApi'
export default {
  data() {
    return {
      payForm: {
        bankAccountName: '',
        bankInfo: '',
        bankLocation: '',
        bankName: '',
        bankAccount: ''
      },
      payRules: {
        bankAccountName: [{ required: true, message: '请输入银行开户名', trigger: 'blur' }],
        bankName: [{ required: true, message: '请输入开户银行', trigger: 'blur' }],
        bankLocation: [{ required: true, message: '请输入开户地址', trigger: 'blur' }],
        bankInfo: [{ required: true, message: '请输入开户支行名称', trigger: 'blur' }],
        bankAccount: [
          { required: true, message: '请输入银行账号', trigger: 'blur' },
          { pattern: /^\d+$/, message: '银行账号只能输入数字', trigger: 'blur' }
        ],
      },
      bankOptions: [],
      bankLocationOptions: [],
      isLoading: false,
      saveLoading: false,
      notEdit: true
    }
  },
  computed: {
    ...mapGetters([
      'userInfo'
    ]),
    isPayAuth() {
      return this.userInfo?.isPayAuth == 1;
    }
  },
  created() {
    this.loadBankOptions('')
    this.loadBankLocationOptions('')
  },
  mounted() {
  },
  methods: {
    loadBankOptions(query) {
        this.isLoading = true;
        getBankBranch({ name:query,pageNo:1,pageNum:50}).then(response => {
          this.bankOptions = response.rows;
        }).finally(() => {
          this.isLoading = false;
        });
    },
    loadBankLocationOptions(query) {
        this.isLoading = true;
        // 这里是你的获取开户行的接口，你应该修改这个接口以适应你的需求
        getBankLocation({ name:query,pageNo:1,pageNum:50 }).then(response => {
          this.bankLocationOptions = response.rows;
          this.isLoading = false;
        }).finally(() => {
          this.isLoading = false;
        });
    },
    getCompanyPayInfoToForm(){
      getCompanyPayInfo().then(res => {
        if (res.code === 200) {
          this.payForm = res.data
        }
      })
    },
    edit() {
      this.notEdit = false
    },
    save() {
      if (this.userInfo?.isCompanyAuth) {
        this.$refs.payFormRef.validate(valid => {
          if (valid) {
            console.log(this.payForm)
            this.saveLoading = true
            companyAuthPay(this.payForm).then(res => {
             if (res.code === 200) {
                this.$message.success('认证成功！');
                this.$store.dispatch('user/getUserInfo')
                this.$emit('goToBaseInfo')
                this.notEdit = true
              }
             }).finally(() => {
              this.saveLoading = false
            })
          }
        })
      } else {
        this.$message.warning('请先进行企业认证！')
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import "@/assets/css/element-variables";

.PayAuth {
  .main-box {
    display: flex;
    align-items: center;
    flex-direction: column;
  }
}

.label {
  padding: 20px;
}

.tip {
  padding-left: 20px;
  color: #F62B00;
  margin-bottom: 20px;
  line-height: 25px;
  text-align: left
}

.form {
  width: 530px;
}

.saveBtn {
  margin-top: 40px;
  margin-bottom: 20px;
  background-color: $--color-primary;
  border: 1px solid $--color-primary;
  color: #fff;
  border-radius: 3px;
  font-size: 14px;
  min-width: 160px;
}
</style>
